<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>朋友圈列表</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/cusmanage/css/formSelects-v4.css">
 
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>	
    <link rel="stylesheet" href="/fission/css/iconfont.css">
<style type="text/css">
		body{
			background: #e9e9e9; 
		}
		/*公共头部带搜索*/
		.public_container{
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		/*新加的二维码*/
		.uploadQrcode_container{
			display: flex;
			align-items: center;
		}
		.uploadQrcode_container button{
			margin-left: 15px;
		}
		.uploadQrcode_container span{
			color: #999;
			font-size: 13px;
		}
		.uploadQrcode_content{
			position: relative;
			width: 150px;
			height: 150px;
			overflow: hidden;
		}
		.qrcodeImg_h{
			width: 150px;
			height: 150px;
		}
		.qrcodeHead_h{
			width: 35px;
			height: 35px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.service-card {
		  padding: 0 7px;
		  color: rgba(0,0,0,.65);
		  line-height: 28px;
		  font-size: 13px;
		  display: inline-block;
		  margin: 0 8px 0 5px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background: #fafafa;
		  border: 1px solid #e9e9e9;
		  border-radius: 4px;
		  position: relative;
		}
		.service-card i {
		  font-size: 14px;
		  display: inline-block;
		  color: #7da3d1;
		  margin-right: 2px;
		}
		.service-card .close {
		  position: absolute;
		  top: -13px;
		  right: -8px;
		  opacity: .6;
		  cursor: pointer;
		}
		.service-card .close:hover {
		  opacity: 1;
		}
		.friendPublish_mainVideo_container{
			align-items: flex-end;
			display: flex;
			padding: 0 5px;
		}
		.friendPublish_mainVideoAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
		}
		.friendPublish_mainVideoImgAdd_container input{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 0;	
		} 
		.friendPublish_mainVideoAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainVideo_content{
			margin-left: 100px;
		}
		/*dao hang*/
		.public-header-nav{
		  background: #fff;
		  border-bottom: 1px solid #e6e6e6;
		  padding-top: 8px;
		  display: flex;
		  align-items: center;
		  padding-left: 0;
		  /*margin-right: 10px;*/
		  margin: 0;
		}
		.public-header-nav li{
		  line-height: 40px;
		  padding: 0 15px;
		  list-style: none;
		}
		.public-header-nav li a{
		  color: #333;
		  font-size: 14px;
		  border-bottom: 2px solid #fff;
		  text-decoration: none;
		}
		.public-header-nav-active{
		  color: #1E9FFF !important;
		  border-bottom: 2px solid #1E9FFF !important;
		}
		.public-header-nav-active a{
			color: #1E9FFF !important;
		}
		/*顶部提示框 开始*/
		.public_tipSetting_contaienr{
			background: #e9e9e9;
			padding: 12px 0;
		}
		.public_tipSetting_content{
			display: flex;
			align-items: center;
			border: 1px solid #ffdda6;
			background: #fff2db;
			padding: 10px;
			margin: 0 20px;
		}
		.public_tipSetting_contaienr p{
			font-size: 14px;
			color: rgba(0,0,0,0.65);
		}
		.public_tipSetting_contaienr a{
			font-size: 14px;
			color: #1890ff;
		}
		.public_tipSetting_contaienr svg{
			margin-left: 5px;
			fill: #999;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<form class="layui-form" id="form1">
		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建企业朋友圈</p>
				</div>
			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="public_form_List" id="verificationContainer" >
						<div class="public_formTitle_container"> 
							<lable class="layui-form-label">发送成员：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
							</div>
							<div class="flex align-start" style="padding: 6px 5px 0px 105px;" id="checkUserCon">
							</div>
						</div>
						<input type="hidden" name="checkUser" id="checkUser"/>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List" id="welcomeContainer">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">文字：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
							  <textarea name="text_content" id="text_content" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
							</div>
						</div>
					</div>
					<div id="otherType">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">其他类型：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareType">
								<input type="radio" lay-filter="shareType" name="shareType" value="1" title="无" checked>
								<input type="radio" lay-filter="shareType" name="shareType" value="2" title="图片">
								<input type="radio" lay-filter="shareType" name="shareType" value="3" title="视频">
								<input type="radio" lay-filter="shareType" name="shareType" value="4" title="图文">
							</div>
						</div>
					</div>
					<!-- 图片 -->
					<div class="public_form_List publicHide_content" id="imgcontainer" style="display: none;">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">图片：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<img onerror="this.style.display='none'" id="pic_image" src="" style="width: 100px; height: 100px;">
								<input type="hidden" name="image" id="image" />
								<button type="button" class="layui-btn" onclick="select_img(this)" data-target="image">
								  <i class="layui-icon">&#xe67c;</i>上传图片
								</button>
							</div>
						</div>
					</div>
					
					<!-- 图文 -->
					<div class="public_form_List publicHide_content" id="imgtextcontainer" style="display: none;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">标题：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_title" id="link_title" required   placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">链接：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_url" id="link_url" required   placeholder="请输入链接" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>

					<!-- 视频  -->
					<div class="public_form_List publicHide_content" id="vodio" style="display: none;">
						<!-- 视频 -->

						<div class="public_form_List" style="height: 100px;">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">视频：</lable>
							</div>
							<input type="hidden" id="video" value=""/>
							<div id="video_box">
								<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container">
									<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>
									<input type="file" accept="video/*" name="file" id="file" onchange="upload_video()">
								</div>
							</div>
						</div>
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">封面图：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block" style="margin-left:0px;">
									<img onerror="this.style.display='none'" id="pic_link_pics" src="" style="width: 100px; height: 100px;">
									<input type="hidden" name="link_pics" id="link_pics" />
									<button type="button" class="layui-btn" onclick="select_img(this)" data-target="link_pics">
									  <i class="layui-icon">&#xe67c;</i>上传封面图
									</button>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="public_form_content" style="height: 50px">
				<div class="public_form_List" id="verificationContainer" >
					<div class="public_formTitle_container"> 
						<lable class="layui-form-label">提醒同步：</lable>
					</div>
					<div class="public_formOther_container">
					      <div style="float: left;"><input type="checkbox" checked="" id="open" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="已开启|已关闭"> </div>
					      <div class="layui-form-mid layui-word-aux">开启会提醒员工发朋友圈，关闭会自动发到员工的朋友圈</div>
					</div>
				</div>
			</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" style="float: left;" type="button" onclick="substrs()">立即发布</button>
						<div class="layui-form-mid layui-word-aux">发布后本条内容将会出现在成员的朋友圈中</div>
					</div>
				</div>
			</div>
			<!-- 公共表单部分 end-->
		</div>
	</form>
</body>
</html>
<script src="/cdn/jquery.js"></script>
<script src="/layui/layui.js"></script>
<script src="/cusmanage/js/formSelects-v4.min.js"></script>
<script src="/js/ajax.js"></script>
<script type="text/javascript">
	function substrs(){
		var open = $('#open').serialize();
		var users = $("#checkUser").val();  //员工列表 字符串
		var text = $("#text_content").val(); //文字
		var shareType = $('#shareType input[name="shareType"]:checked').val(); //类型
		var	pic_image = $("#pic_image").attr("src"); 	//图片
		var	pic_link_pics = $("#pic_link_pics").attr("src"); 	//图片
		var	video = $("#video").val(); 	//视频
		var	link_title = $("#link_title").val(); 	//图文的标题
		var	link_url = $("#link_url").val(); 	//图文的url
		if(!users){
			tusi("请选择员工");
			return false;
		}
		if(shareType == 1 && text == ""){
			tusi("文字不可为空");
			return false;
		}
		if(shareType == 2 && !pic_image){
			tusi("图片信息不完整");
			return false;
		}
		if(shareType == 3 && (!video || !pic_link_pics)){
			tusi("视频信息不完整");
			return false;
		}
		if(shareType == 4 && (!link_title || !link_url)){
			tusi("图文信息不完整");
			return false;
		}
		myAjaxPost(false, true, "", { pic_link_pics:pic_link_pics,shareType:shareType,users:users,text:text,pic_image:pic_image,video:video,link_title:link_title,link_url:link_url,open:open}, function (resp) {
			if(resp.status == "success"){
				tusi(resp.msg);
				setTimeout(function(){
	                parent.layer.closeAll('iframe');
                },1000);
			}else{
				tusi(resp.msg);
			}
		})
	}
</script>
<script type="text/javascript">
	$("#closeTips").click(function(){
		$('.public_tipSetting_contaienr').hide();
	})

	$('#addPeople').on('click',function(){
		layer.open({
		  type: 2,
		  title: '请选择使用人员',
		  shadeClose: true,
		  shade: 0.2,
		  area: ['700px', '530px'],
		  content: 'select_user.html?type=1'
		}); 
	})
	layui.use('layer', function(){
	  var layer = layui.layer;
	}); 
	layui.use('form', function(){
	  var form = layui.form;
	  // 其他类型
	  form.on('radio(shareType)', function (data) {
	        if ($('#shareType input[name="shareType"]:checked').val() == "1") {
				$('#image').removeAttr("lay-verify");
				$('#link_title').removeAttr("lay-verify");
				$('#link_url').removeAttr("lay-verify");
				$('#text_content').attr("lay-verify","required");
	            $(".publicHide_content").hide();
	        }else if($('#shareType input[name="shareType"]:checked').val() == "2"){
				$('#text_content').removeAttr("lay-verify");
				$('#link_title').removeAttr("lay-verify");
				$('#link_url').removeAttr("lay-verify");
				$('#image').attr("lay-verify","required");
	        	$(".publicHide_content").hide();
	        	$("#imgcontainer").show();
	        }else if($('#shareType input[name="shareType"]:checked').val() == "4"){
				$('#text_content').removeAttr("lay-verify");
				$('#image').removeAttr("lay-verify");
				$('#link_title').attr("lay-verify","required");
				$('#link_url').attr("lay-verify","required");
	        	$(".publicHide_content").hide();
	        	$("#imgtextcontainer").show();
	        }else if($('#shareType input[name="shareType"]:checked').val() == "3"){
				$('#text_content').removeAttr("lay-verify");
				$('#image').removeAttr("lay-verify");
				$('#link_title').removeAttr("lay-verify");
				$('#link_url').removeAttr("lay-verify");
				$('#interest').attr("lay-verify","required");
	        	$(".publicHide_content").hide();
	        	$("#vodio").show();
	        }
	        form.render();
	    });
	});
	function select_img(a){
	  	var targetId=a.getAttribute('data-target');
	  	layer.open({
			title:'图片库',
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: false,
			content: '/imgLib/lib.html?type=vshop_img&target='+targetId
	  	});
	}

	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  if(tgt=='image'){
		var inputEle=$('#image');
		var prevEle=$('#pic_image');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='link_pic'){
		var inputEle=$('#link_pic');
		var prevEle=$('#pic_link_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='link_pics'){
		var inputEle=$('#link_pics');
		var prevEle=$('#pic_link_pics');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='miniprogram_pic'){
		var inputEle=$('#miniprogram_pic');
		var prevEle=$('#pic_miniprogram_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt.indexOf('part_time_') > -1){ // 分时段 通用
		var inputEle=$('#' + tgt);
		var prevEle=$('#preview_' + tgt);
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }
	};
	function upload_video(){
		var formData = new FormData();
		 formData.append("file",$("#file")[0].files[0]);
		 $.ajax({
			url: "upload_video.html",
			type: "post",
			data: formData,
			processData: false,
			contentType: false,
			success:function(resp){
				$("#file").val('');
				if(resp.status == 'success'){
					$('#video').val(resp.data);
					$(".friendPublish_mainVideoImgAdd_container").hide();
					initVideo(resp.data);
				}else{
					tusi(resp.msg)
				}
			}
		 })
	}

		function initVideo(video){
			$('#video_box').empty();
			var html = '';
			html += '<div class="friendPublish_mainVideo_content">';
			html += '<div class="prism-player" id="player-con" style="float:left"></div>';
			html += '<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container">';
			html += '<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>';
			html += '<input type="file" accept="video/*" name="file" id="file" onchange="upload_video()">';
			html += '</div>';
			html += '</div>';
			$('#video_box').append(html);
			var player = new Aliplayer({
			  "id": "player-con",
			  "source": video,
			  "width": "120px",
			  "height": "100px",
			  "autoplay": true,
			  "isLive": false,
			  "rePlay": false,
			  "playsinline": true,
			  "preload": true,
			  "controlBarVisibility": "hover",
			  "useH5Prism": true,
			  "skinLayout": [
				{
				  "name": "bigPlayButton",
				  "align": "blabs",
				  "x": 33,
				  "y": 22
				},
				{
				  "name": "H5Loading",
				  "align": "cc"
				},
				{
				  "name": "errorDisplay",
				  "align": "tlabs",
				  "x": 0,
				  "y": 0
				},
				{
				  "name": "infoDisplay"
				},
				{
				  "name": "tooltip",
				  "align": "blabs",
				  "x": 0,
				  "y": 56
				},
				{
				  "name": "thumbnail"
				},
				{
				  "name": "controlBar",
				  "align": "blabs",
				  "x": 0,
				  "y": 0,
				  "children": [
					{
					  "name": "progress",
					  "align": "blabs",
					  "x": 0,
					  "y": 44
					},
					{
					  "name": "playButton",
					  "align": "tl",
					  "x": 15,
					  "y": 12
					},
					{
					  "name": "timeDisplay",
					  "align": "tl",
					  "x": 10,
					  "y": 7
					},
					{
					  "name": "fullScreenButton",
					  "align": "tr",
					  "x": 10,
					  "y": 12
					},
					{
					  "name": "volume",
					  "align": "tr",
					  "x": 5,
					  "y": 10
					}
				  ]
				}
			  ]
			}, function (player) {
				console.log("The player is created");
			});
		}
</script>